<template>
	<view class="quanList container flex-xy pt20">
		<view class="container flex-xy">
			
			<view class="w100 flex-xy"  v-if="list.length > 0">
				<view class="w90   flex-spc-x mb20" v-for="(items, i) in list" v-bind:key="i">
					<!-- 左侧图片 -->
					<view style="width: 180rpx ;height:180rpx;" class="bgF radio20 flex-xy"><image :src="imgUrl" class="w80 h80"></image></view>
					<!-- 右侧 -->
					<view style="width: calc(100% - 180rpx);height:180rpx;" class="bgF radio20  flex-spc-x">
						<view class="w80 flex-aro-x h100">
							<view>
								<text class="fs42w">￥</text>
								<text class="fs60w">{{ items.price }}</text>
							</view>
							<view class="fs60w">代金券</view>
						</view>
						<view class="w20 h100 flex-xy fsbr28 coe04" style="border-left: 1px dashed #d6d6d6;" @click="Huan(i)">
							<text>立</text>
							<text>即</text>
							<text>领</text>
							<text>取</text>
						</view>
					</view>
				</view>
			</view>
		
			
			
			
			<view v-else class="container flex-xy">
				<view class="w100" style="height: 92rpx;"></view>
				<image src="../../static/noMsg.png" mode="widthFix" style="width: 60%;" class="pt50"></image>
			</view>
		</view>
	
		<!-- 兑换成功 -->
		<u-popup v-model="showDuiSuccess" mode="center " border-radius="20">
			<view class="w100 h100 flex-xy">
				<view class="bgF radio20 " style="height: 500rpx;width: 400rpx;">
					<view class="flex-xy w100" style="height: 200rpx ;background: #78CE4F; border-radius: 20rpx 20rpx 0 0; ">
						<u-icon name="checkmark-circle-fill" color="#FFFFFF" size="100rpx"></u-icon>
					</view>
					<view class=" fs50w w100 flex-xy mt40 mb40">兑换成功</view>
					<view class=" fs24 co7e w100 flex-xy">继续赚取积分，兑换更多奖品</view>

					<view class="w100 flex-xy">
						<view @click="successConfirm" class="w60 coF fs30 radio50 flex-xy mt50 mb20" style="background: #78CE4F;height: 50rpx;">确 认</view>
					</view>
				</view>
			</view>
		</u-popup>

		<!-- 兑换失败 -->
		<u-popup v-model="showDuiFail" mode="center " border-radius="20">
			<view class="w100 h100 flex-xy">
				<view class="bgF radio20 " style="height: 500rpx;width: 400rpx;">
					<view class="flex-xy w100" style="height: 200rpx ;background: #EC1C1C; border-radius: 20rpx 20rpx 0 0; ">
						<u-icon name="close-circle-fill" color="#FFFFFF" size="100rpx"></u-icon>
					</view>
					<view class=" fs50w w100 flex-xy mt40 mb40">兑换失败</view>
					<view class=" fs24 co7e w100 flex-xy">{{ errmsg }}</view>

					<view class="w100 flex-xy">
						<view @click="failConfirm" class="w60 coF fs30 radio50 flex-xy mt50 mb20" style="background: #EC1C1C;height: 50rpx;">确 认</view>
					</view>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
var api = require('../../api/api.js');
export default {
	data() {
		return {
			name: 'quanList',
			pid: null,
			list: [], //目录下具体券
			imgUrl: uni.getStorageSync('imgUrl'),

			showDuiSuccess: false, //兑换成功
			showDuiFail: false, //兑换失败
			errmsg: ' ',
			name: '聚瑞福利'
		};
	},
	onShow() {
		if (this.judgeLoading()) {
			
		} else {
			// 本地没有token  需要跳转到登陆页面
			uni.navigateTo({
				url: '/pages/index/login'
			});
		}
	},
	onLoad(e) {
		let pid = e.pid;
		this.pid = pid;

		let name = e.name;
		uni.setNavigationBarTitle({
			title: name
		});
	},
	created() {
		this.Dui(); //Dui  查询券类型下的券   传pid
	},
	methods: {
		// 获取类目列表
		Dui() {
			this.list = [];
			uni.request({
				url: api.Dui,
				method: 'POST',
				data: { pid: this.pid },
				success: res => {
					console.log(res);
					if (res.data.errno == 0) {
						this.list = res.data.data.quanList;
					}
				}
			});
		},
		//Huan  兑换
		Huan(i) {
			let data = {
				id: this.list[i].id,
				price: this.list[i].price,
				desc: uni.getStorageSync('username')
			};

			uni.request({
				url: api.Huan,
				method: 'POST',
				data: data,
				success: res => {
					console.log(res);
					if (res.data.errno == 0) {
						this.showDuiSuccess = true;
						this.showDuiFail = false;
					} else {
						this.showDuiSuccess = false;
						this.showDuiFail = true;

						this.errmsg = res.data.errmsg;
					}
				},
				fail() {
					this.showDuiSuccess = false;
					this.showDuiFail = true;
					this.errmsg = res.data.errmsg;
				}
			});
		},

		// 兑换成功确认
		successConfirm() {
			this.showDuiSuccess = false;
			this.showDuiFail = false;
			this.Dui();
		},
		// 兑换失败确认
		failConfirm() {
			this.showDuiSuccess = false;
			this.showDuiFail = false;
			this.Dui();
		}
	}
};
</script>

<style lang="less"></style>
